<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Zero Clipboard Test</title>
<style type="text/css">
body { font-family: arial, sans-serif; font-size: 9pt; }
#d_clip_container{height:37px;line-height:37px;width:170px;}
.my_clip_button {  text-align: center; border: 1px solid black; background-color: #ccc; cursor: default; font-size: 9pt; }
.my_clip_button.hover { background-color: #eee; }
.my_clip_button.active { background-color: #aaa; }
</style>
<script src="http://cdn.staticfile.org/jquery/2.1.1-rc2/jquery.min.js" ></script>
</head>
<body>
<h1>Zero Clipboard Test</h1>
<table width="100%">
   <tbody>
      <tr>
         <td width="400px"><textarea id="fe_text" cols="50" rows="5" onChange="clip.setText(this.value)">Copy me!</textarea></td>
         <td><div id="d_clip_container" style="position:relative">
               <div id="d_clip_button" class="my_clip_button">复制</div>
            </div></td>
      </tr>
      <tr>
         <td><textarea id="testarea" cols="50" rows="5">在这里粘贴</textarea></td>
      </tr>
      <tr>
         <td ><div id="d_debug" style="border:1px solid #aaa; padding: 10px; font-size:9pt;">
               <p>调试输出:</p>
            </div></td>
      </tr>
   </tbody>
</table>
</body>
<script src="./ZeroClipboard.js"></script>
<script>
	var clip = null;
	function init() {
		clip = new ZeroClipboard.Client();
		clip.addEventListener('load', function (client) {
			debugstr("Flash movie loaded and ready.");
		});
		clip.addEventListener('mouseOver', function (client) {
			// 更新待复制内容
			clip.setText( $('#fe_text').val() );
		});
		clip.addEventListener('complete', function (client, text) {
			debugstr("Copied text to clipboard: " + text );
		});
		clip.glue( 'd_clip_button', 'd_clip_container' );  //按钮，容器
	}
	function debugstr(msg) {
		var p = document.createElement('p');
		p.innerHTML = msg;
		$('#d_debug').append(p);
	}
 init();
</script>

</html>